<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- style标签，添加样式 -->
  <style>
    #tab {
      /* 解决双边框问题 重叠、塌陷 */
      border-collapse: collapse;
      width: 400px;
      height: 400px;
    }

    #tab tr:nth-child(2) td:nth-child(3) {
      color: red;
      font-size: 32px;
      /* 对齐方式 */
      text-align: center;
      background-color: antiquewhite;
      font-weight: bold;
      text-decoration: underline;
      font-style: italic;
    }

    #ol {
      list-style-type: upper-alpha;
    }

    body {
      margin-bottom: 400px;
    }

    #keywords {
      color: red;
    }
  </style>
</head>

<body>
  <!-- 1. 标题 h123456 headline -->
  <!-- em 相对单位 1em = 16px -->
  <h1 id="top">1级标题</h1>
  <h2>2级标题</h2>
  <h3>3级标题</h3>
  <h4>4级标题</h4>

  <!-- 2. 段落 paragraph -->
  <p>
    zaicishuruduanluozaicishuruduanluozaicishu<span
      id="keywords">ruduan</span>luozaicishuruduanluozaicishuruduanluozaicishuruduanluo</p>
  <p>
    zaicishuruduanluozaicishuruduanluozaicishuruduanluozaicishuruduanluozaicishuruduanluozaicishuruduanluo</p>
  <p>
    zaicishuruduanluozaicishuruduanluozaicishuruduanluozaicishuruduanluozaicishuruduanluozaicishuruduanluo</p>

  <!-- 3. 文本格式化标签 加粗/倾斜/上下标/下划线/删除线 -->
  <b>加粗</b>
  <strong>加粗</strong>

  <!-- italic -->
  <i>倾斜</i>
  <em>倾斜</em>

  <!-- supscript subscript -->
  m<sup>2</sup>
  O<sub>2</sub>

  <!-- underline 插入线 insert -->
  <ins>下划线</ins>

  <!-- delete 穿透线 -->
  <del>删除线</del>

  <!-- 4. 链接 属性 anchor 锚点 -->
  <a href="https://www.baidu.com" target="_blank">点击跳转到百度</a>
  <a href="#top">置顶</a>

  <!-- 5. 图片 源路径，相对路径 当路径错误时的提示信息 -->
  <img src="./images/snipaste.png" width="300" alt="路径错误" title="标题">

  <!-- 6. 表格 行列 二维 嵌套 Excel row column -->
  <table id="tab" border="1">
    <tr>
      <td>123</td>
      <td>123</td>
      <td>123</td>
      <td>123</td>
    </tr>
    <tr>
      <td>123</td>
      <td>123</td>
      <td>123</td>
      <td>123</td>
    </tr>
    <tr>
      <td>123</td>
      <td>123</td>
      <td>123</td>
      <td>123</td>
    </tr>
    <tr>
      <td>123</td>
      <td>123</td>
      <td>123</td>
      <td>123</td>
    </tr>
  </table>

  <!-- 7. 列表 list 有顺序123ABCabc阿尔法贝塔伽马 无顺序 小圆点/小方块 order订单点单 unorder-->
  <ol id="ol">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
  </ol>
  <ul>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
  </ul>

  <!-- 水平线 horizontal水平 vertical垂直的 -->
  <hr>

  <!-- break打破断开 -->
  <br>

  <!-- 8. 表单 提交给谁 后端ip -->
  <form action="">
    用户名：<input type="text" placeholder="请输入用户名"><br>
    密码：<input type="password" placeholder="请输入密码"><br>
    性别：
    <input type="radio" name="gender" value="male">男
    <input type="radio" name="gender" value="female">女
    <br>
    兴趣爱好：
    <input type="checkbox" name="hobby" value="badminton">羽毛球
    <input type="checkbox" name="hobby" value="tennis">网球
    <input type="checkbox" name="hobby" value="basketball">篮球
    <br>
    城市：
    <select name="city">
      <option value="nanjing">南京</option>
      <option value="beijing">北京</option>
      <option value="shanghai">上海</option>
      <option value="hangzhou">杭州</option>
    </select>
    <br>
    个人介绍：
    <textarea name="introduction" cols="30" rows="10" placeholder="请输入个人介绍"></textarea>
    <br>
    <input type="submit" value="提交">
    <input type="reset" value="重置">
  </form>

  <!-- 
    http://localhost:52330/html/index.html

    问号开头，&符号多个字段，查询字符串 name=value 键值对 key=value
    ?gender=male&hobby=badminton&hobby=tennis&city=beijing&introduction=introduce
   -->

  <!-- 
    块级标签：可以自动换行的，带样式，不带样式 h p table ul ol div
    行内标签：不可以自动换行的，带样式，不带样式 b strong i em a img... span
    -->

  <div>通用的块级标签</div>
  <div>通用的块级标签</div>
  <div>通用的块级标签</div>
  <span>通用的行内标签</span>
  <span>通用的行内标签</span>
  <span>通用的行内标签</span>

</body>

</html>